<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryFormRef"   :inline="true">
            <el-form-item label="菜单名称" class="item" prop="menuName">
                <el-input v-model="queryParams.menuName" placeholder="请输入菜单名称" clearable style="width: 240px"
                          @keyup.enter.native="load"/>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="Search" @click="load">搜索</el-button>
                <el-button icon="refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <!--按钮区域    -->
        <div style="margin:5px">
            <el-button type="primary" plain icon="plus" @click="handleAdd">新增</el-button>
        </div>

        <!-- 菜单列表区-->
        <el-table :data="tableData" row-key="menuName"  :header-cell-style="{background:'#eef1f6',color:'#606266'}"  :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" style="width: 100%">
            <el-table-column prop="menuName" label="菜单名称"></el-table-column>
            <el-table-column prop="icon" label="菜单图标">
                <template #default="scope" >
                    <div v-if="scope.row.icon!='#'">
                        <svg-icon  :name="scope.row.icon"/>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="component" label="组件路径"></el-table-column>
            <el-table-column fixed="right" label="操作" width="260">
                <template #default="scope">
                    <div>
                        <el-button type="text" icon="edit" @click="handleUpdate(scope.row)" >修改</el-button>
                        <el-button type="text" @click="handleAdd(scope.row)" icon="plus">新增</el-button>
                        <!-- 自带提示框的删除按钮 -->
                        <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row)">
                            <template #reference>
                                <el-button size="small" icon="delete" type="text">删除</el-button>
                                <!-- 注意此处如果方法加在删除按钮上，那么在弹出提示框点击确定的时候就无法执行删除操作了，所以这里需要将删除的方法，挂到弹框的确定按钮上 -->
                            </template>
                        </el-popconfirm>
                    </div>
                </template>

            </el-table-column>
        </el-table>

        <!-- 新增菜单弹窗 -->
        <el-dialog :title="title" v-model="dialogVisible" width="600px" >
            <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" class="item">
                <el-form-item label="上级菜单:" >
                    <tree-select  :value="form.parentId" :options="menuOptions"
                                  :objMap="{
                               value: 'menuId',
                               label: 'menuName',
                               children: 'children'}"
                                  placeholder="选择上级菜单" style="width:85%"/>
                </el-form-item>

                <el-form-item label="菜单名称:" prop="menuName" >
                    <el-input v-model="form.menuName" style="width:85%"></el-input>
                </el-form-item>

                <el-form-item label="菜单类型:" prop="menuType" >
                    <el-radio-group v-model="form.menuType">
                        <el-radio   label="1">目录</el-radio>
                        <el-radio   label="2">菜单</el-radio>
                        <el-radio   label="3">按钮</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="菜单图标:" v-if="form.menuType!='3'">
                    <el-input v-model="form.icon" style="width:85%"></el-input>
                </el-form-item>

                <el-form-item label="是否外链:" prop="isFrame" v-if="form.menuType!='3'">
                    <el-radio-group v-model="form.isFrame">
                        <el-radio  label="0">是</el-radio>
                        <el-radio  label="1">否</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="菜单路由:" v-if="form.menuType!='3'" prop="path">
                    <el-input v-model="form.path" style="width:85%"></el-input>
                </el-form-item>

                <!-- 选择菜单的时候才显示 -->
                <el-form-item label="组件路径:" v-if="form.menuType=='2'">
                    <el-input v-model="form.component" style="width:85%"></el-input>
                </el-form-item>

                <el-form-item label="权限标识:" v-if="form.menuType!='1'">
                    <el-input v-model="form.perms" style="width:85%"></el-input>
                </el-form-item>

            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm" >确 定</el-button>
              </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
    import {ref, nextTick} from 'vue';
    import {menuList, getMenu, addMenu, delMenu} from "../../api/system/menu";
    import {ElMessage} from "element-plus";
    import TreeSelect from '@/components/TreeSelect'

    // 弹出层标题
    const title = ref("");
    let dialogVisible = ref(false);
    const total = ref(0);
    const tableData = ref([]);
    const menuOptions = ref([]);
    const queryParams = ref({
        menuName: undefined
    })
    const form = ref({
        menuId: undefined,
        parentId: '',
        menuName: undefined,
        icon: undefined,
        menuType:'1',
        isFrame:'1'
    });
    const rules = ref({
        menuName: [
            {required: true, message: "菜单名称不能为空", trigger: "blur"}
        ],
        path: [
            {required: true, message: "路由地址不能为空", trigger: "blur"}
        ]
    })

    /** 弹框中的 ref */
    const formRef = ref(null);
    /** 列表查询的 ref */
    const queryFormRef = ref(null);

    //查询列表
    const load = () => {
        menuList(queryParams.value.menuName).then(res => {
            tableData.value = res.data;
            total.value = res.data.total;
        });
    }

    //添加菜单
    const handleAdd = async (row) => {
        reset();
        await getTreeSelect();
        if (row != null && row.menuId) {
            form.value.parentId = row.menuId;
        } else {
            form.value.parentId = '';
        }
        dialogVisible.value = true;
        title.value = '添加菜单';
    }

    //修改菜单
    const handleUpdate = async (row) => {
        reset();
        await getTreeSelect();
        getMenu(row.menuId).then(res => {
            form.value = res.data;
            title.value = "修改菜单";
            dialogVisible.value = true;
        });
    }

    //查询菜单下拉树结构
    const getTreeSelect = () => {
        menuOptions.value = [];
        menuList().then(res => {
            const rootMenu = {menuId: 0, menuName: '根目录', children: []}
            rootMenu.children = res.data;
            menuOptions.value.push(rootMenu);
        });
    }

    //提交
    const submitForm = () => {
        formRef.value.validate(valid =>{
            if(valid){
               if(form.value.menuId){
                   updateMenu(form.value).then(res =>{
                       ElMessage.success('修改成功');
                       load();  //更新完成后，重新刷新表格数据
                       dialogVisible.value = false;    //最后关闭弹窗
                   });
               }else{
                   addMenu(form.value).then(res =>{
                       ElMessage.success('保存成功');
                       load();  //重新刷新表格数据
                       dialogVisible.value = false;    //最后关闭弹窗
                   })
               }
            }
        })
    }

    //删除菜单
    const handleDelete= (row)=>{
        const menuId = row.menuId;
        delMenu(menuId).then(res =>{
            ElMessage.success('删除成功');
            load();  //重新刷新表格数据
        });
    }

    //新增弹框的时候重置一下表单（特指弹框的表单）
    const reset =()=>{
        form.value={
            menuId: undefined,
            parentId:'',
            menuName: undefined,
            menuType:"1",
            isFrame:"1"
        }
        if(formRef.value){
            formRef.value.resetFields();
        }
    }

    //重置搜索框
    const resetQuery= ()=>{
        queryFormRef.value.resetFields();
        load();
    }

    load();

</script>

<style scoped>
    .svg-icon {
        fill: currentColor;
        height: 15px;
        width: 15px;
    }
</style>
